<template>
  <view class="container">
	  <view class="nullH"></view>
	  <view class="header">
			<view class="left">
				<image class="iconfont icon-xiangzuojiantou" @click="goBack"></image>
			</view>
	  	<u-avatar class="avatar" @click="goToPersonalInformation(uid,username)" mode="aspectFill"  :src="userAvatar" size="100rpx"/>
		<view class="username">{{username}}</view>
		<view class="changeFollow" v-if="myUid!=writerUid" @click="changeFollow()">
			<view class="notFollow" v-if="isFollow==false">
				关注
			</view>
			<view class="followed" v-else>
				已关注
			</view>
		</view>
		<view class="share" @click="share()">
			<image class="iconfont icon-fenxiang"></image>
			<view class="count">{{ shareCount === 0 ? '分享到微信' : shareCount }}</view>
		</view>
	  </view>
    <!-- 照片展示部分 -->
	<view>
		<view class="swiper-container" >
				<image class="null" v-if="photos.length==0" src="../../static/gif/refresh_yu_1.gif" mode=""></image>
		      <swiper
		        class="photo-gallery"
		        :current="currentIndex"
		        autoplay="false"
		        circular="true"
		        @change="onSwiperChange"
				v-if="photos.length > 0"
		      >
		        <swiper-item v-for="(photo, index) in photos" :key="index">
		          <image
		            :src="photo"
					mode="aspectFit"
		            class="photo"
		            @click="previewImage(index)"
		          />
		        </swiper-item>
		      </swiper>
		
		      <!-- 指示器小点和数字索引显示部分 -->
		      <view class="indicator-container">
		        <view class="indicator">
		          <view
		            class="dot"
		            v-for="(photo, index) in photos"
		            :key="index"
		            :class="{ active: currentIndex === index }"
		            @click="setCurrentIndex(index)"
		          ></view>
		        </view>
		        <view class="index-indicator" v-if="isReady">
		          <text>{{ currentIndex + 1 }} / {{ photos.length }}</text>
		        </view>
		      </view>
		    </view>
		
		    <!-- 文字描述部分 -->
		    <view class="description">
		      <text class="description-text">
		        {{content}}
		      </text>
		    </view>
		
		    <!-- 评论区 -->
		    <view class="comment-section">
			<view class="NULL" v-if="comments.length==0">
				还没有任何评论呢，快来成为首评吧！
			</view>
		      <!-- 评论列表 -->
		      <view class="comments">
		        <view v-for="(comment, index) in comments" :key="index" class="comment">
		          <view class="comment-header">
		            <u-avatar @click="goToPersonalInformation(comment.user.uid,comment.user.username)" :src="comment.user.avatar"  class="avatar" />
		            <view class="comment-info">
		              <view class="user-info" @click="replyTo(comment.user.username,comment.user.uid,index)">
		              	<text class="username" >{{ comment.user.username }}</text>
		<!--              	<text v-if="comment.user.userType=='dev'" class="boss">(老板)</text>
						<text v-else-if="comment.user.userType == 'robot'" class="robot">(人机)</text> -->
		              </view>
		              <view class="additional-info">
<!-- 		                <text class="location">IP:{{ comment.location }}</text>
		                <text class="device">设备:{{ comment.device }}</text> -->
		                <text class="time">评论时间:{{ timeShow(comment.time) }}</text>
		              </view>
		            </view>
		          </view>
		          <view class="comment-content">
					  <image v-if="comment.user.uid==myUid" class="iconfont icon-shanchu icon" @click="deleteItem(index,-10086)" ></image>
		            <text>{{ comment.content }}</text>
		          </view>
				  <view v-if="comment.repliesCount > 0" class="comment-show" >
						<text @click="changeReplies(index)">{{ comment.isRepliesShow ? '收起回复' : '查看回复' }} ({{ comment.repliesCount }})</text>
				  </view>
		          <!-- 楼中楼效果 -->
		          <view v-if="comment.isRepliesShow && comment.repliesCount> 0" class="reply-section">
		            <view v-for="(reply, replyIndex) in comment.replies" :key="replyIndex" class="reply">
		              <view class="comment-header">
		                <u-avatar @click="goToPersonalInformation(reply.user.uid,reply.user.username)" :src="reply.user.avatar" class="avatar" />
		                <view class="comment-info">
		                 <view class="user-info" @click="replyTo(reply.user.username,reply.user.uid,index)">
		                 	 <text class="username" >{{ reply.user.username }}</text>
		<!-- 					 <text v-if="reply.user.userType=='dev'" class="boss">(老板)</text>
							 <text v-else-if="reply.user.userType == 'robot'" class="robot">(人机)</text> -->
		                 </view>
		                  <view class="additional-info">
		                    <text class="time">评论时间:{{ timeShow(reply.time) }}</text>
		                  </view>
		                </view>
		              </view>
		              <view class="comment-content">
						<image v-if="reply.user.uid==myUid" class="iconfont icon-shanchu icon" @click="deleteItem(index,replyIndex)" ></image>
		                <text v-if="reply.replyTo!=null" class="replyUser">@{{reply.replyTo}}:</text><text>{{ reply.content }}</text>
		              </view>
		            </view>
		          </view>
		        </view>
		      </view>
		    </view>
			<view class="comment-input">
			  <input 
			    v-model="newComment" 
			    :placeholder="toTargetOne!=null ? '@' + toTargetOne : '说点什么...'" 
			    @confirm="submitComment()" 
			    class="comment-input-field" 
			  />
				<text class="likes" @click="toggleLike">
			        <span :class="{ liked: hasLiked }">
			         {{ hasLiked ? '❤️' : '🖤' }} <!-- 根据点赞状态显示不同的心 -->
					</span>
					{{ likes }}
				</text>
			</view>
	</view>
	
  </view>
</template>

<script>
import {pathToBase64,base64ToPath} from 'image-tools'
import method from '@/utils/methods.js'
export default {
  data() {
    return {
      photos: [],
	  writerUid:"",
	  myUid:'',
	  userAvatar: '',
	  uid:'0',
	  token:null,
	  username:'',
	  replyToUserId:null,
      newComment: '',                                                                                                                                                                                                                                                                                               
	  likes:0,
	  postId:null,
	  hasLiked: false,
	  shareCount:0,
	  toTargetOne:null,
	  toIndex:null,
	  content:"",
	  isFollow:false,
	  isReady:false,
	  begin:0,
	  count:50,
      comments: [],
      currentIndex: 0
    };
  },
  onLoad(param) {
	this.token=uni.getStorageSync("token")||null
  	this.myUid=uni.getStorageSync('UID')||null
	this.writerUid=param.uid;
	this.uid=param.uid
	this.postId=param.postId;
	if(this.myUid!=this.writerUid&&this.token!=null){
		method.isFollow(this.myUid,this.writerUid,this.myUid,this.token).then((result)=>{
			this.isFollow=result.follow
			console.log(result)
		}).catch((error)=>{
			console.log(error.message)
		})
	}
		this.initLiveContent();//初始化动态文本，包括内容，评论区，点赞数
		this.initComment()
  },
  onShow() {
	this.getUserAvatar()
	this.initLiveImg()
  },
  mounted() {
  	uni.onKeyboardHeightChange((res) => {
  	        // 如果 res.height 为 0，说明键盘已经收起
  	        if(res.height === 0&&this.newComment.length==0) {
				this.toTargetOne=null
  	        }
  	      });
  },
  methods: { 
	  initComment(){
		  // console.log("初始化评论!")
		  //初始化部分一级评论
		 uni.request({
			url:this.baseUrl+"/getComments/parent/"+this.postId+"/"+this.begin+"/"+this.count,
			method:"GET",
			//不需要toekn校验
			success: (res) => {
				if(res.data.code==1){
						// console.log(res.data.data)
						this.comments=[]
						res.data.data.comments.forEach((data)=>{
							this.comments.unshift({
							 commentId:data.comment.commentId,
							  user: {
							    avatar: uni.getStorageSync('userAvatar'+data.comment.userId),
							    username: data.username,
								uid:data.comment.userId
							  },
							  time: data.comment.createdAt,
							  content:data.comment.content,
							  isRepliesShow:false,
							  repliesCount:data.comment.repliesCount,
							  replies: []
							});
						})
				}
			}
		 }) 
	  },
	  timeShow(timestamp){
	  		 const now = new Date();
	  		    const messageTime = new Date(timestamp);
	  		    const diffInSeconds = Math.floor((now - messageTime) / 1000);
	  		    
	  		    if (diffInSeconds < 60) {
	  		        return '刚刚';
	  		    } else if (diffInSeconds < 3600) {
	  		        const minutes = Math.floor(diffInSeconds / 60);
	  		        return `${minutes}分钟前`;
	  		    } else if (diffInSeconds < 86400) {
	  		        const hours = Math.floor(diffInSeconds / 3600);
	  		        return `${hours}小时前`;
	  		    } else {
	  		        const year = messageTime.getFullYear();
	  		                const month = String(messageTime.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的
	  		                const day = String(messageTime.getDate()).padStart(2, '0');
	  		                const hour = String(messageTime.getHours()).padStart(2, '0');
	  		                const minute = String(messageTime.getMinutes()).padStart(2, '0');
	  		                
	  		                return `${year}-${month}-${day} ${hour}:${minute}`;
	  		    }
	  },
	  getUserAvatar(uid){
		  uni.request({
		  	url:this.baseUrl+"/live/getLiveUserAvatar",
		  			method:"POST",
		  			data:{
		  				postId:this.postId,
		  				uid:this.writerUid
		  			},
		  			header: {
		  				'Content-Type': 'application/json',
		  			    token: this.token, // 身份验证
		  			    uid: this.myUid,
		  			},
		  			success: (res) => {
		  			    if (res.data.code == 1) {
		  			        // 处理内容
		  					// console.log("动态详情内容：")
		  					// console.log(res.data.data)
		  			        // 处理 base64Images
		  					const avatar=res.data.data.avatar;
		  					const imgBase64 = avatar.userAvatar
		  					const imgExtension = avatar.userType;
		  					const imgType = imgExtension; // 使用后缀名作为 MIME 类型
		  					const dataUrl = "data:image/" + imgType + ";base64," + imgBase64;
		  			        // 如果需要，可以在这里打印 this.photos
		  			        // console.log(this.photos);
		  					this.userAvatar=dataUrl   
		  			    } else {
		  			        uni.showToast({
		  			        	title:res.data.msg,
		  			        	icon:"none",
		  			        	duration:1000
		  			        })
		  					setTimeout(()=>{
		  					uni.navigateBack()	
		  					},1100)
		  			    }
		  			},
		  			fail: () => {
		  				uni.showToast({
		  					title:"加载失败！",
		  					icon:"none",
		  					duration:2000
		  				})
		  			},
		  			
		  })
	  },
	  initLiveContent(){
		  uni.request({
		  	url:this.baseUrl+"/live/getLiveContent",
			method:"POST",
			data:{
				postId:this.postId,
				writerUid:this.writerUid,
				uid:this.myUid
			},
			header: {
				'Content-Type': 'application/json',
			    token: this.token, // 身份验证
			    uid: this.myUid,
			},
			success: (res) => {
			    if (res.data.code == 1) {
			        this.content = res.data.data.post.content;
					this.username=res.data.data.username
					// console.log(res.data.data.isLike)
					this.hasLiked=res.data.data.isLike!=null?true:false
					// console.log("该用户给这篇动态点赞状态",this.hasLiked)
					this.likes=res.data.data.likes
			    } else {
			        uni.showToast({
			        	title:res.data.msg,
			        	icon:"none",
			        	duration:1000
			        })
					setTimeout(()=>{
					uni.navigateBack()	
					},1100)
			    }
			},
			fail: () => {
				uni.showToast({
					title:"加载失败！",
					icon:"none",
					duration:2000
				})
			},
			
		  })
		  
	  },
	  initLiveImg(){
	  		  uni.request({
	  		  	url:this.baseUrl+"/live/getLiveImg",
	  			method:"POST",
	  			data:{
	  				postId:this.postId,
	  				uid:this.writerUid
	  			},
	  			header: {
	  				'Content-Type': 'application/json',
	  			    token: this.token, // 身份验证
	  			    uid: this.myUid,
	  			},
	  			success: (res) => {
	  			    if (res.data.code == 1) {
	  			        // 处理 base64Images
	  			        const base64Images = res.data.data.base64Images;
	  			        // 清空 this.photos 数组
	  			        this.photos = [];
	  			
	  			        base64Images.forEach(image => {
	  			            const imgBase64 = image.base64;
	  			            const imgExtension = image.extension;
	  			
	  			            // 连接成 Data URL
	  			            const imgType = imgExtension; // 使用后缀名作为 MIME 类型
	  			            const dataUrl = "data:image/" + imgType + ";base64," + imgBase64;
	  			
	  			            // 将 Data URL 添加到 this.photos 数组
	  			            this.photos.push(dataUrl);
	  			        });
	  			        this.isReady = true;        
	  			    } else {
	  			        uni.showToast({
	  			        	title:res.data.msg,
	  			        	icon:"none",
	  			        	duration:1000
	  			        })
	  					setTimeout(()=>{
	  					uni.navigateBack()	
	  					},1100)
	  			    }
	  			},
	  			fail: () => {
	  				uni.showToast({
	  					title:"加载失败！",
	  					icon:"none",
	  					duration:2000
	  				})
	  			},
	  			
	  		  })
	  },
	 
	  deleteItem(index,replyIndex){
		  uni.showModal({
			title:"删除评论",
			content: '确定要删除这条评论吗？',
		  	confirmText:"删除",
			cancelText:"算了",
			success: (res) => {
				if(res.confirm){
					uni.showLoading({
						title:"正在删除"
					})
					if(replyIndex==-10086){
						uni.request({
							url:this.baseUrl+"/deleteComment/"+this.comments[index].commentId+'/'+this.myUid,
							method:"GET",
							header: {
								'Content-Type': 'application/json',
							    token: this.token, // 身份验证
							    uid: this.myUid,
							},
							success: (res) => {
								if(res.data.code==1){
									this.comments.splice(index,1)
									setTimeout(()=>{
									  uni.hideLoading()
										uni.showToast({
									    title:"删除成功！",
									    icon:"none",
										duration:200
									  })
									},200)
								}else{
									uni.hideLoading()
									uni.showToast({
									  title:"删除失败",
									  icon:"none",
								duration:200
									})
								}
							}
						})
						
					}else{
						uni.request({
							url:this.baseUrl+"/deleteComment/"+this.comments[index].replies[replyIndex].commentId+'/'+this.myUid,
							method:"GET",
							header: {
								'Content-Type': 'application/json',
							    token: this.token, // 身份验证
							    uid: this.myUid,
							},
							success: (res) => {
								if(res.data.code==1){
									this.comments[index].repliesCount-=1
									this.comments[index].replies.splice(replyIndex,1)
									setTimeout(()=>{
									  uni.hideLoading()
										uni.showToast({
									    title:"删除成功！",
									    icon:"none",
										duration:200
									  })
									},200)
								}else{
									console.log(res.data.msg)
								}
							}
						})
						
					}
					
				}else{
					//取消删除
				}
			}
		  })
		  
	  },
	  share(){
		 uni.share({
		 	provider: "weixin",
		 	scene: "WXSceneSession",
		 	type: 0,
		 	href: "https://ts2.cn.mm.bing.net/th?id=OIP-C.PDvdA9JPjBHwssJFC9DQ2QHaKp&w=208&h=299&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2",
		 	title: "LINK分享",
		 	summary: "雷军也在偷偷看的软件，比CSDN好一万倍，赶紧跟我一起来体验！",
		 	imageUrl: "https://ts2.cn.mm.bing.net/th?id=OIP-C.PDvdA9JPjBHwssJFC9DQ2QHaKp&w=208&h=299&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2",
		 	success: function (res) {
		 		console.log("success:" + JSON.stringify(res));
		 	},
		 	fail: function (err) {
		 		console.log("fail:" + JSON.stringify(err));
		 	}
		 });

	  },
	  changeFollow(){
		  if(this.myUid==null||this.token==null){
	  		uni.navigateTo({
			  	url:"/pages/login/login"
	  		})
		  return
		  }
		if(this.isFollow==false){
			method.followUser(this.myUid,this.writerUid,this.myUid,this.token,"动态").then((result) => {
				this.isFollow=true
				//关注成功，发送通知消息
				// method.noticePostLike(this.$websocket,this.postId,this.myUid,this.)
				//   uni.showToast({
				//   	title:result.message,
				// 	icon:"none",
				// 	duration:500
				//   })
			})
			.catch((error) => {
				uni.showToast({
					title:error.message,
					icon:"none",
					duration:2000
				})
			});
		}else{
			uni.showModal({
				title:"注意",
				content:"确定要取消关注吗？",
				cancelText:"算了",
				confirmText:"我要取关",
				success: (res) => {
					if(res.confirm){
					//向后端发送取消关注请求
					method.cancelFollowUser(this.myUid,this.writerUid,this.myUid,this.token).then((result) => {
						this.isFollow=false;
						  uni.showToast({
						  	title:result.message,
							icon:"none",
							duration:500
						  })
					})
					.catch((error) => {
						uni.showToast({
							title:error.message,
							icon:"none",
							duration:2000
						})
					});
					}else{
						return;
					}
				}
			})
		}
	},
	  toggleLike() {
	        // 切换点赞状态
			if(this.token==null){
				uni.navigateTo({
					url:"/pages/login/login",
				})
				return;
			}
			// console.log("准备切换点赞状态")
	        if (this.hasLiked==false) {
				uni.request({
					url:this.baseUrl+"/live/like/"+this.postId+"/"+this.myUid,
					header:{
						token:this.token,
						uid:this.myUid
					},
					success: (res) => {
						if(res.data.code==1){
							 this.likes++
							 this.hasLiked=true
							uni.showToast({
								'title':"已点赞",
								"icon":"none",
								duration:500
							})
						}else{
							console.log(res.data.msg)
						}
					}
				})
	        } else {
				uni.request({
					url:this.baseUrl+"/live/cancelLike/"+this.postId+"/"+this.myUid,
					header:{
						token:this.token,
						uid:this.myUid
					},
					success: (res) => {
						if(res.data.code==1){
							 this.likes--
							 this.hasLiked=false
							uni.showToast({
								'title':"已取消",
								"icon":"none",
								duration:500
							})
						}else{
							console.log(res.data.msg)
						}
					}
				})
	        }
	      },
	  goToPersonalInformation(uid,username){
		  uni.navigateTo({
		    url: "/pages/personalInformation/personalInformation?uid="+uid+"&username="+username
		  });
	  },
	  replyTo(username,userId,index){
		  this.toTargetOne=username;
		  this.replyToUserId=userId
		   this.toIndex=index;
	  },
    previewImage(index) {
      let that = this;
      			uni.showLoading({
      				title: "加载中..."
      			})
      			base64ToPath(this.photos[index]) 
      				.then(path => {
      					let imgs = [];
      					uni.hideLoading()
      					imgs[0] = path;
                
      					uni.previewImage({
      						current: 0,
      						urls: imgs,
							longPressActions: {
								itemList: ['发送给朋友', '保存图片', '收藏'],
								success: function(data) {
									uni.showToast({
										title:"功能测试中",
										icon:"none",
										duration:1000
									})
								},
								fail: function(err) {
									console.log(err.errMsg);
								}
							}
      					});
      				})
      				.catch(error => {
      					// 图片加载失败
      					uni.hideLoading()
      				})
    },
    setCurrentIndex(index) {
      this.currentIndex = index;
    },
    submitComment() {
		if(this.token==null){
			uni.navigateTo({
				url:"/pages/login/login"
			})
			return
		}
      if (this.newComment.trim()) {
        // 获取格式化后的时间
        const time = this.formatTime(new Date());
        // 将评论信息添加到评论数组中
		console.log("this.toIndex",this.toIndex)
		if(this.toIndex==null){
			uni.request({
				url:this.baseUrl+"/setComment",
				method:"POST",
				data:{
					data:{
						"postId":Number(this.postId),
						"userId":Number(this.myUid),
						"parentCommentId":null,
						"replyToUserId":null,
						"content":this.newComment.trim(),
						"createdAt":time
					},
					msgType:"setComment"
				},
				header:{
					token:this.token,
					uid:this.myUid
				},
				success: (res) => {
					if(res.data.code==1){
						// this.comments.unshift({
						//   user: {
						//     avatar: uni.getStorageSync('userAvatar'+this.myUid),
						//     username: uni.getStorageSync('username'),
						// 	uid:this.myUid
						//   },
						//   time: time, // 格式化后的时间
						//   commentId:res.data.data,
						//   content: this.newComment.trim(),
						//   isRepliesShow:false,
						//   replies: []
						// });
						this.initComment()
						this.newComment = '';
						this.toTargetOne=null;
						this.toIndex=null
					}else{
						uni.showToast({
							title:res.data.msg,
							icon:"none"
						})
					}
				},
				complete() {
					// 清空输入框
					this.newComment = '';
					this.toTargetOne=null;
					this.toIndex=null
				}
			})
			
		}
		else{
			uni.request({
				url:this.baseUrl+"/setComment",
				method:"POST",
				data:{
					data:{
						"postId":Number(this.postId),
						"userId":Number(this.myUid),
						"parentCommentId":Number(this.comments[this.toIndex].commentId),
						"replyToUserId":Number(this.replyToUserId),
						"content":this.newComment.trim(),
						"createdAt":time
					},
					msgType:"setComment"
				},
				header:{
					token:this.token,
					uid:this.myUid
				},
				success: (res) => {
					if(res.data.code==1){
						this.comments[this.toIndex].repliesCount+=1
						this.comments[this.toIndex].replies.unshift({
						  user: {
						    avatar: uni.getStorageSync('userAvatar'+this.myUid),
						    username:uni.getStorageSync('username') ,
							uid:this.myUid
						  },
						  replyToUserId:this.toTargetOne,
						  time: time, // 格式化后的时间
						  content: this.newComment.trim(),
						});
						this.newComment = '';
						this.toTargetOne=null;
						this.toIndex=null
					}else{
						uni.showToast({
							title:res.data.msg,
							icon:"none"
						})
					}
				},
				complete() {
					// 清空输入框
					this.newComment = '';
					this.toTargetOne=null;
					this.toIndex=null
				}
			})
			
		}
            
      }
    },
    onSwiperChange(event) {
      this.currentIndex = event.detail.current;
    },
	 // 获取设备信息
	  getDeviceInfo() {
	    const systemInfo = uni.getSystemInfoSync(); // 获取设备信息
	    return systemInfo.model; // 返回机型信息
	  },
	  
	  // 格式化时间
	  formatTime(date) {
	    const d = new Date(date);
	    const year = d.getFullYear();
	    const month = (d.getMonth() + 1).toString().padStart(2, '0');
	    const day = d.getDate().toString().padStart(2, '0');
	    const hours = d.getHours().toString().padStart(2, '0');
	    const minutes = d.getMinutes().toString().padStart(2, '0');
	    const seconds = d.getSeconds().toString().padStart(2, '0');
	    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	  },
	  changeReplies(index){
		  this.comments[index].isRepliesShow=!this.comments[index].isRepliesShow;
		  if(this.comments[index].isRepliesShow){
			  if(this.comments[index].replies.length<=0)
			  uni.request({
			  			url:this.baseUrl+"/getComments/son/"+this.postId+"/"+this.comments[index].commentId+"/"+this.begin+"/"+this.count,
			  			method:"GET",
			  			//不需要toekn校验
			  			success: (res) => {
			  				if(res.data.code==1){
			  						console.log(res.data.data)
			  						res.data.data.comments.forEach((data)=>{
			  							this.comments[index].replies.unshift({
			  							 commentId:data.comment.commentId,
			  							  user: {
			  							    avatar: uni.getStorageSync('userAvatar'+data.comment.userId),
			  							    username: data.username,
			  								uid:data.comment.userId
			  							  },
			  							  time: data.comment.createdAt,
			  							  content:data.comment.content,
			  							});
			  						})
			  				}else{
								console.log("加载子评论失败")
							}
			  			}
			  }) 
		  }
	  },
	  goBack() {
	    uni.navigateBack(); // 返回上一页
	  },
  }
};
</script>

<style scoped lang="scss">
	
.container {
  display: flex;
  flex-direction: column;
  padding: 0 15rpx;
}
.nullH{
	height: var(--status-bar-height) ;
	background-color: #fff;
	position: sticky;
	top:0;	
	z-index: 10;
}
.header{
	background-color: #fff;
	padding: 10rpx 0;
	border-bottom: 1px solid #888;
	position: sticky;
	top: var(--status-bar-height);
	z-index: 10;
	display: flex;
	margin-bottom: 10rpx;
	.iconfont {
	    font-size: 60rpx;
	    width: 60rpx;
	    height:100rpx;
	    text-align: center;
	    line-height: 100rpx;
	}
	.avatar{
		margin-left: 10rpx;
		border-radius: 25rpx;
		border-radius: 50%;
		border: 6rpx solid #dddddd;
	}
	.username{
		margin-left: 10rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 45rpx;
	}
	.changeFollow{
		display: flex;
		margin: auto auto auto auto;
		padding: 10rpx;
		font-size: 35rpx;
		border-radius: 10rpx;
		border: 1rpx solid #dddddd;
		.notFollow{
			color: #000;
		}
		.followed{
			color: #888;
		}
	}
	.share {
	  display: flex;
	  align-items: center;
	  margin-left: auto;
	  margin-right: 20rpx;
	  transition: transform 0.2s;
	  .iconfont {
	    font-size: 40rpx;
	    height: 40rpx;
	    width: 40rpx;
	    line-height: 40rpx;
	    margin-bottom: 5rpx;
	  }
	
	  .count {
	    margin-left: 5rpx;
	    font-size: 28rpx;
	    color: #333;
	  }
	
	  .iconfont.active {
	    color: #007BFF;
	    transform: scale(1.1); /* 已收藏时图标放大 */
	  }
	}
}

.swiper-container {
  height: 600rpx;
  position: relative;
  margin-bottom: 100rpx;
  border-radius: 20rpx;
}

.photo-gallery {
  height: 100%;
  border-radius: 20rpx;
}

.photo {
  width: 100%;
  height: 100%;
  border-radius: 20rpx;
}

.indicator-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  bottom: -80rpx;
  width: 100%;
}

.indicator {
  display: flex;
  justify-content: center;
  margin-bottom: 10rpx;
}

.dot {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: #ccc;
  margin: 0 10rpx;
  transition: background-color 0.5s, transform 0.3s;
}

.dot.active {
  background-color: #007AFF;
  transform: scale(1.3);
}

.index-indicator {
  font-size: 25rpx;
  color: #666;
}

.description {
  margin-top: 30rpx;
  padding: 20rpx;
  background-color: #fff;

  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.comment-section {
  margin-top: 20rpx;
}

.comment-input {
  background-color: #fff;
  display: flex;
  position: sticky;
  margin-top: 500rpx;
  bottom: 0;
  z-index: 10;
  left: 0;
  right: 0;
  padding: 10rpx;
  border-radius: 5px;
}

.comment-input-field {
  padding: 20rpx;
  font-size: 30rpx; 
    flex: 1;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.likes {
  font-size: 40rpx;
  margin:auto 0  auto 20rpx;
  color: #007AFF; /* 点赞颜色 */
  cursor: pointer; /* 鼠标悬停时显示为可点击 */
}

.likes .liked {
  color: #d32f2f; /* 点赞时的颜色 */
}
.comments .comment {
  padding: 20rpx;
  margin-bottom: 20rpx; /* 增加评论之间的间距 */
  border: 1px solid #e0e0e0;
  background-color: #fff;
  border-radius: 5px;
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx; /* 增加用户名部分的间距 */
}

.avatar {
  width: 80rpx; /* 增大头像大小 */
  height: 80rpx;
  border-radius: 50%;
  margin-right: 15rpx; /* 调整头像与文字之间的间距 */
}

.comment-info {
  display: flex;
  flex-direction: column;
  width: 100%; /* 确保评论信息部分占满全宽 */
}

.additional-info {
  display: flex;
  justify-content: space-between;
  margin-top: 5rpx;
  font-size: 24rpx;
  color: #888;
}

.location,
.device {

}

.time {
  font-size: 24rpx; 
  color: #888;
  text-align: right; /* 时间右对齐 */
}

.username {
  font-size: 35rpx; /* 增大用户名字体 */
  color: #333;
}

.additional-info {
  display: flex;
  color: rgb(211, 211, 211);
  justify-content: space-between;
  margin-top: 5rpx;
}

.location,
.device,
.time {
  font-size: 24rpx; 
  color: #888;
}

.time {
  text-align: right;
}

.comment-content {
  margin-top: 10rpx;
  font-size: 30rpx; 
  color: black;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  .iconfont {
	  color: #007AFF;
      text-align: center;
      font-size:14px;
      height: 20px;
      width: 20px;
      line-height: 28px;
      transition: color 0.2s,transform 0.2s; /* 动画效果 */
  }
}

.reply-section {
  margin-top: 20rpx;
  padding-left: 50rpx; 
}

.reply {
  padding: 15rpx;
  margin-bottom: 15rpx;
  border: 1px solid #e0e0e0;
  background-color: #f9f9f9;
  border-radius: 5px;
}

.reply .comment-header {
  margin-bottom: 5rpx;
}

.reply .comment-content {
  margin-top: 5rpx;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  .iconfont {
	  color: #007AFF;
      text-align: center;
      font-size:15px;
      height: 20px;
      width: 20px;
      line-height: 27px;
      transition: color 0.2s,transform 0.2s; /* 动画效果 */
  }
}


// .comment-section .comment-input {
//   margin-top: 20rpx;
// }
.comment-show{
  color: #007AFF; /* 回复按钮颜色 */
  margin-top: 5px;
  display: flex;
  font-size: 12px; /* 小一点的字体 */
 
}
.replyUser{
	color: #007AFF;
}
.boss { 
  margin-left: 5rpx;
  font-size: 30rpx;  /* 设置字体大小 */
  animation: colorChange 0.3s infinite; /* 3秒循环一次 */
}

@keyframes colorChange {
  0% {
    color: #ff4500; /* 起始颜色 */
  }
  25% {
    color: #00ff00; /* 中间颜色 */
  }
  50% {
    color: #0000ff; /* 另一中间颜色 */
  }
  75% {
    color: #ff1493; /* 接近结束时的颜色 */
  }
  100% {
    color: #ff4500; /* 恢复起始颜色 */
  }
}
.robot {
  font-size: 30rpx; /* 设置字体大小 */
  color: #00FF00; /* 非常亮的绿色，令人不适 */
}
.null{
	color: lightgray;
	height: 50px;
	width: 50px;
	margin-top: 300rpx;
	margin-left: 300rpx;
}
.NULL{
	color: lightgray;
	font-size: 30rpx;
	margin-top: 100rpx;
	text-align: center;
}
 </style>